<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row {
            background-color: aqua;
            height: 100%;
        }

        /* 在本calss元素末尾追加内容xxx */
        .clearfix:after{ /* 伪类选择器 */
            /* 在后面追加内容名 */
            content: "xxxx";
            /* 追加内容,可以空着 */
            display: block;
            /* 清除浮动，无论是left还是right，可以写成left活着right */
            clear: both;
        }

        .colomn { 
            float: left;
            padding: 15px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>

<body>
    <!-- 列 -->
    <div class="row clearfix">
        <div>Lorem, ipsum dolor.</div>
        <div>Sed, ab esse!</div>
        <div>Iure, quam molestias!</div>
        <div>Doloribus, necessitatibus quia.</div>
        <div class="colomn">Lorem, ipsum.</div>
        <div class="colomn">Aliquid, et.</div>
        <div class="colomn" style="float: right;">Ducimus, iste?</div>
        <div class="colomn" style="float: right;">Fugiat, vitae.</div>
    </div>
</body>

</html>